<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <title>clunch.js - 用例测试</title>
    <script src="../../../dist/clunch-template.js"></script>
    <link rel="shortcut icon" href="../../../clunch.png">
    <style>
        body {
            margin: 0;
        }

        #root {
            width: 100vw;
            height: 100vh;
        }
    </style>
</head>

<body>

    <div id="root">

        <ui-demo :len='len'></ui-demo>

        <circle cx='300' cy='300' :radius='radius1'></circle>

        <circle cx='300' cy='300' :radius='radius2' type='stroke' line-width='40' stroke-color='pink'></circle>

    </div>

    <script>

        Clunch.series('ui-demo', ['number', function ($number) {
            return {
                attrs: {
                    len: $number()(function (newVal, oldVal, deep) {
                        return Math.random() * newVal;
                    })
                    // len: $number()(true)
                },
                link: function (painter, attr) {

                    painter.config('fillStyle', 'red').fillRect(10, 10, attr.len, 50);


                }
            };
        }]);

        window.clunch = new Clunch({
            el: document.getElementById('root'),

            // 设置数据改变无需过渡动画
            // animation: false,
            // time:0,
            data: function () {
                return {
                    radius1: 200,
                    radius2: 100,
                    len: 100
                };
            }
        });


    </script>

</body>

</html>
